<template>
  <div id="categorty">
    <NavBar class="category-bar">
      <div slot="center">分类</div>
    </NavBar>
    <div class="cat-container">
      <Scroll class="left_menu" ref="scroll1">
        <ul>
          <li
            v-for="(item, index) in category"
            :key="index"
            class="left_item"
            :class="{ active: currentIndex == index }"
            @click="menuClick(index)"
          >
            {{ item.title }}
          </li>
        </ul>
      </Scroll>
      <Scroll class="right_content">
        <div class="goods_group">
          <div
            class="goods_list"
            v-for="(item, index) in subcategory"
            :key="index"
          >
            <a :href="item.link">
              <img v-lazy="item.image" />
              <p class="goods_name">{{ item.title }}</p>
            </a>
          </div>
        </div>
        <TabControl
          :titles="['综合', '新品', '销量']"
          @tabClick="tabClick"
          ref="tab"
        />
        <goods-list :goods="showGoods" />
      </Scroll>
    </div>
  </div>
</template>

<script>
import { getCateGory, getSubCategory, getCategoryDetail } from "@/api/category";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Category",

  data() {
    return {
      currentType: "new",
      maitKey: "",
      category: [],
      subcategory: [],
      currentIndex: 0,
      goods: {
        pop: [],
        new: [],
        sell: [],
      },
    };
  },
  created() {
    /**分类信息 */
  },
  mounted() {
    getCateGory().then((res) => {
      this.category = res.data.category.list;
      this.$nextTick(() => {
        this.getSubCategory(0); //也可以用settimeout
        this.getSubCategoryDetail("pop");
        this.getSubCategoryDetail("new");
        this.getSubCategoryDetail("sell");
      });
    });
    // this.getSubCategoryDetail("pop");
    // this.getSubCategoryDetail("new");
    // this.getSubCategoryDetail("sell");
  },
  computed: {
    showGoods() {
      return this.goods[this.currentType];
    },
  },
  methods: {
    menuClick(index) {
      this.currentIndex = index;
      this.getSubCategory(index);
    },
    getSubCategory(index) {
      let maitKey = this.category[index].maitKey;
      getSubCategory(maitKey).then((res) => {
        // console.log(res);
        this.subcategory = res.data.list;
      });
    },
    getSubCategoryDetail(type) {
      let miniWallkey = this.category[this.currentIndex].miniWallkey;
      getCategoryDetail(miniWallkey, type).then((res) => {
        console.log(res);
        //  this.goods[type].List.push(...res.data.list);
        this.goods[type] = res;
      });
    },
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      this.$refs.tab.currentIndex = index;
    },
  },
};
</script>

<style lang="less" scoped>
#category {
  height: 100vh;

  position: relative;
}

.cat-container {
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
  display: flex;
}
.left_menu {
  overflow: hidden;
  flex: 2;
  border-right: 1px solid var(--color-tint);
  .left_item {
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
  }
}
.right_content {
  overflow: hidden;
  flex: 5;
  .goods_group {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .goods_list {
    font-size: 14px;
    width: 33.3%;
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
  }
}

.active {
  color: hotpink;
  border-left: 3px solid hotpink;
  font-weight: 600;
  background: #f6f6f6;
}
</style>
